<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域选择</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->
    <style type="text/css">
        .dataItem i {
            display: none;
        }
        .dataItem.selected i {
            display: inline;
        }
    </style>
</head>
<body class="bg_w">
<div class="layui-fluid">
    <div class="content-wrap">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm6" id="area">
                        <h5 style="font-size: 18px;color: #47bac2; font-weight: bold; line-height: 50px; text-align: center;">省市选择<span class="red">（3/23）</span></h5>
                        <div style="position: relative;"><input type="text" class="layui-input" ><a class="layui-btn add_btn search" style="position: absolute; right: 1px; top: 0;">搜索</a></div>

                        <div class="contentParamList" style="width: 100%; box-sizing: border-box; border-top: 0;">
                            <div class="dataItem">
                            <label class="itemLabel">重庆市-重庆市<i class='layui-icon layui-icon-ok'></i></label>
                            </div>
                            <div class="dataItem">
                            <label class="itemLabel">四川-成都<i class='layui-icon layui-icon-ok'></i></label>
                            </div>
                        </div>
                        <h6 style="text-align: center;margin-top: 20px;"><a class="layui-btn add_btn all">全选</a><a class="layui-btn layui-btn-primary del">取消全选</a></h6>
                    </div>
                    <div class="layui-col-sm6" id="driveschool">
                        <h5 style="font-size: 18px;color: #47bac2; font-weight: bold; line-height: 50px; text-align: center;">驾校选择<span class="red">（3/23）</span></h5>
                        <div style="position: relative;"><input type="text" class="layui-input" ><a class="layui-btn add_btn" style="position: absolute; right: 1px; top: 0;">搜索</a></div>

                        <div class="contentParamList" style="width: 100%; box-sizing: border-box; border-top: 0;">
                            <div class="dataItem">
                                <label class="itemLabel">启富驾校<i class='layui-icon layui-icon-ok'></i></label>
                            </div>
                            <div class="dataItem">
                                <label class="itemLabel">新城驾校<i class='layui-icon layui-icon-ok'></i></label>
                            </div>
                        </div>
                        <h6 style="text-align: center;margin-top: 20px;"><a class="layui-btn add_btn all">全选</a><a class="layui-btn layui-btn-primary del">取消全选</a></h6>
                    </div>

                </div>

            </div>

        </form>



    </div>
</div>


</body>
<script>

    layui.use(['table','form'], function(){
        var table = layui.table;
        var form=layui.form;
        var treetable = layui.treetable;

    });
    $(".contentParamList .dataItem").each(function () {

        var $item = $(this);

        $item.click(function () {
            $item.toggleClass("selected");
        })

    });
    //全选
    $('.all').click(function () {
        console.log('11')
        $(this).parent().siblings('.contentParamList').find('.dataItem').addClass('selected');
    })
    //取消全选
    $('.del').click(function () {
        $(this).parent().siblings('.contentParamList').find('.dataItem').removeClass('selected');
    })


</script>
</html>